<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model.trim="query.invoiceCode" clearable placeholder="请输入发票号" @keyup.enter.native="getInfo" /> -->
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="margin-left: 0;">
        批量开票
      </el-button>
    </div>
    <el-table :data="tableData" row-key="index" highlight-current-row border
      :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="selectableStatus" />
      <el-table-column prop="statementCode" label="对账单单号" />
      <el-table-column prop="invoiceCode" label="发票号" />
      <el-table-column prop="inStoreNos" label="入库单号" />
      <el-table-column prop="ourHeaderId" label="公司方抬头">
        <template slot-scope="{row:{ourHeader}}">
          {{ ourHeader.name }}/{{ ourHeader.taxpayer }}/{{ ourHeader.bankDetail }}
        </template>
      </el-table-column>
      <el-table-column prop="sellHeaderId" label="供应商抬头">
        <template slot-scope="{row}">
          {{ row.beneficiaryAccountName }}/{{ row.bankAccount }}/{{ row.bankName }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="taxRate" label="税率" /> -->
      <el-table-column prop="taxAmount" label="税额" width="130" />
      <el-table-column prop="amount" label="金额（不含税）" width="130" />
      <el-table-column prop="totalAmount" label="金额（含税）" width="130" />
      <el-table-column :label="$t('table.actions')" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleAddOnly(row)" :disabled="row.invoiceCode">开票</el-button>
          <el-button type="danger" size="mini" @click="handleClick(row)" :disabled="row.invoiceCode">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="total" style="margin-top:20px;" :current-page="query.pageIndex" :page-sizes="[5, 10, 20, 50]"
      :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import {
  accBuyStatementList,
  accDeleteBuyStatement,
  accGenerateBuyInvoice
} from "@/api/qmsQualityManagement";
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { total } from "@/api/greenInformation";

export default {
  name: 'Customerforecast',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 20,
      },
      tableData: [],
      selectedList: [],
      total:0
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async handleAddOnly(row) {
      this.$prompt('请输入发票号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S+$/,
        inputErrorMessage: '发票号不能为空'
      }).then(async ({ value }) => {
        await accGenerateBuyInvoice({
          type: 2,
          ids: row.id,
          invoiceCode: value
        })
        this.getInfo()
        this.$message.success('操作成功！')
      })
    },
    async handleAdd() {
      if (!this.selectedList.length) {
        this.$message.warning("请至少选择一条订单");
        return;
      }

      this.$prompt('请输入发票号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\S+$/,
        inputErrorMessage: '发票号不能为空'
      }).then(async ({ value }) => {
        await accGenerateBuyInvoice({
          type: 2,
          ids: this.selectedList.join(','),
          invoiceCode: value
        })
        this.getInfo()
        this.$message.success('操作成功！')
      })
    },

    handleSelectionChange(e) {
      this.selectedList = [];
      e.forEach(item => {
        this.selectedList.push(item.id);
      });
    },
    selectableStatus(row) {
      return !row.invoiceCode
    },
    async handleClick({ id }) {
      this.$confirm('此操作将永久删除该对账单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await accDeleteBuyStatement({ id })
        this.getInfo()
        this.$message.success('操作成功！')
      })
    },
    handleSizeChange(size) {
      this.query.pageSize = size
      this.getInfo()
    },
    handleCurrentChange(currentPage) {
      this.query.pageIndex = currentPage
      this.getInfo()
    },
    async getInfo() {
      const { list, total } = await accBuyStatementList(this.query)
      this.tableData = list
      this.total = total
    }
  }
}

</script>
<style>
.item {
  padding: 10px 30px;
  border: 0.5px solid #dfe6ec;

}

.name {

  font-weight: bold;
}

.item1 {
  /*color:#999;*/
  /*font-size:14px;*/
}
</style>
